<template>
    <view class="body">
        <u-toast ref="uToast"></u-toast>
        <view class="register flex-center-center">
            用户注册
        </view>
        <view class="reg">
            <view class="reg2">
                <view class="mtop20">
                    <!-- <p>设备SN号</p> -->
                    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                        <u-form-item label="设备SN号" labelWidth="120px" prop="snCode" borderBottom ref="item2">
                            <u--input v-model="form.snCode" type="snCode" border="none" clearable
                                placeholder="请输入设备SN号"></u--input>
                            <u-icon slot="right" @tap="getScanCode" name="scan" size="32"></u-icon>
                        </u-form-item>
                    </u--form>
                </view>

                <view class="mtop20">
                    <!-- <p>注册地址</p> -->
                    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
                        <!-- <u-form-item label="注册地址" labelWidth="120px" prop="region" borderBottom ref="item3">
                            <view class="input" @tap="chooseCity">
                                {{form.region.label}}
                            </view>
                            <u-icon slot="right" name="map" size="26" @tap="getSite"></u-icon>
                        </u-form-item> -->
                        <u-form-item prop="address" borderBottom ref="item3">
                            <u--input v-model="form.address" type="address" border="none" clearable
                                placeholder="请输入详细地址"></u--input>
                            <u-icon slot="right" name="map" size="30" @tap="getSite"></u-icon>
                        </u-form-item>

                    </u--form>
                </view>
            </view>

            <view class="mtop30">
                <u-button type="primary" color="#3182f4" shape="circle" :text="text" @click="registerBtn()"></u-button>
            </view>

        </view>

        <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue"
            @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
    </view>
</template>


<script>
    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
    import util from '@/common/utils.js'
    import {
        deviceAdd
    } from '@/common/api.js'

    export default {
        components: {
            mpvueCityPicker
        },
        data() {
            return {

                cityPickerValue: [0, 0, 1],
                themeColor: '#007AFF',
                form: {
                    snCode: '',
                    acctAddress: '',
                    address: '',
                    region: {
                        label: "",
                        value: [],
                        cityCode: ""
                    },
                },
                text: '提交',
                rules: {
                    'snCode': {
                        type: 'string',
                        required: true,
                        message: '请输入SN号',
                        trigger: ['blur', 'change']
                    },



                },

            };
        },
        methods: {
            inputPassword() {

            },
            toLogin() {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            },
            // 扫一扫
            getScanCode() {
                // #ifdef !H5
                // uni.scanCode({
                //     success: function(res) {
                //         console.log('条码类型：' + res.scanType);
                //         this.form.snCode = res.result
                //         console.log('条码内容：' + this.form.snCode);
                //     }
                // });
                this.scanStart()
                // #endif

                // #ifdef H5
                console.log('我是H5平台');
                this.initScanner()
                // #endif
            },

            scanStart() {
                uni.scanCode({
                    scanType: ['barCode'],
                    success: (res) => {
                        // console.log('条码类型：' + res.scanType);
                        this.form.snCode = res.result
                        console.log('条码内容：' + res.result);
                    }
                });
            },
            scanEnd() {
                uni.scanCode({
                    scanType: ['barCode'],
                    success: (res) => {
                        // console.log('条码类型：' + res.scanType);
                        // console.log('条码内容：' + res.result);
                        this.form.snCode = res.result
                    }
                });
            },
            onScan() {
                uni.scanCode({
                    scanType: ['barCode'],
                    success: (res) => {
                        // console.log('条码类型：' + res.scanType);
                        // console.log('条码内容：' + res.result);
                        this.form.snCode = res.result
                    }
                });
            },


            // 获取当前定位
            getSite() {
                let that = this
                uni.chooseLocation({
                    success: function(res) {
                        console.log('位置名称：' + res.name);
                        console.log('详细地址：' + res.address);
                        console.log('纬度：' + res.latitude);
                        console.log('经度：' + res.longitude);
                        that.form.address = res.address
                    }
                });
            },
            registerBtn() {

                if (this.form.snCode.length === 0) {
                    this.$u.toast('snCode不能为空')
                    return;
                }
                this.form.acctAddress = this.form.region.label + ',' + this.form.address

                if (this.form.acctAddress.length === 1) {
                    this.$u.toast('请输入注册地址')
                    return;
                }

                deviceAdd(this.form).then((res) => {
                    if (res.status === 200 || res.status === 0) {

                        this.$refs.uToast.show({
                            message: '添加成功',
                            complete() {
                                uni.navigateTo({
                                    url: '/pages/device/selectDevice/selectDevice'
                                })
                            }
                        })
                    }

                })


                // this.$u.api.reg(patams).then(() => {
                //     // util.goLogin();
                //     this.$u.toast('注册成功，请登录！')
                //     util.goPage('/pages/login/login', 500)
                // })
            },

            onCancel(e) {
                console.log(e)
            },
            chooseCity() {
                this.$refs.mpvueCityPicker.show()
            },
            onConfirm(e) {
                this.form.region.label = e.label;
                this.cityPickerValue = e.value;
                console.log(e);
            },

        },
        onReady() {
            //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
            this.$refs.uForm.setRules(this.rules)
        },
    };
</script>

<style lang="scss" scoped>
    .body {
        width: 92%;
        padding: 0 4%;

        .register {
            margin-top: 20rpx;
            height: 200rpx;
            width: 100%;
            font-weight: 600;
            font-size: 40rpx;

            .logo {
                width: 150rpx;
                height: 150rpx;
                border-radius: 20rpx;
            }

        }

        .reg {
            .regTip {
                span {
                    font-size: 24rpx;
                    color: #3182f4;
                    padding: 10rpx;
                }
            }
        }
    }
</style>